<template>
    <div class="page-container">
        <div class="card-content">
            <el-row style="align-items:flex-start;">
                <el-row align="middle" class="card-scan">
                    <el-image style="width: 80px; height: 80px" :src="qrCodeurl" :zoom-rate="1" :preview-src-list="[qrCodeurl]" fit="contain"/>
                    <span>扫码查看名片</span>
                </el-row>
                <div class="card-tabs">
                    <el-tabs v-model="currentCard" type="card" size="small" :addable="true" @tab-add="handleAddCard" @tab-change="tabChange">
                        <el-tab-pane v-for="item in cardList" :key="item.id" :label="item.title" :name="item.id"/>
                    </el-tabs>
                    <div style="width:100%">
                        <el-radio-group v-model="cardForm.cardType" size="default">
                            <el-radio :label="1">样式一</el-radio>
                            <el-radio :label="2">样式二</el-radio>
                            <el-radio :label="3">样式三</el-radio>
                        </el-radio-group>
                    </div>
                </div>
            </el-row>
            <el-row style="margin-top:10px;align-items:stretch;flex-wrap:wrap;">
                <div class="card-preview-box">
                    <el-scrollbar style="height:667px">
                        <div class="card-header">
                            <!-- 样式一 -->
                            <div class="card-vertical" v-if="cardForm.cardType == 1">
                                <div class="logo" v-if="cardForm.logo">
                                    <el-image style="height:30px" :src="cardForm.logo" fit="scale-down"></el-image>
                                </div>
                                <div class="user-data">
                                    <div class="user-message">
                                        <el-image style="width: 60px; height: 60px" :src="cardForm.avatar" :preview-src-list="[cardForm.avatar]" fit="cover"/>
                                        <div class="user-info">
                                            <p class="user-name">{{ cardForm.name }}</p>
                                            <p class="job">{{ cardForm.positionName }}</p>
                                        </div>
                                    </div>
                                    <div class="chat-icon">
                                        <span>17聊</span>
                                        <communication theme="filled" size="14" fill="#ffffff"/>
                                    </div>
                                </div>
                                <div class="card-code-content">
                                    <h4 class="company-name">{{ cardForm.companyName }}</h4>
                                    <div class="code-bottom" justify="space-between" align="start">
                                        <div class="left-data">
                                            <el-row class="row-cell" v-if="cardForm.showPhone == 1">
                                                <el-icon>
                                                    <ele-Phone/>
                                                </el-icon>
                                                <p class="data">{{ cardForm.phone }}</p>
                                            </el-row>
                                            <el-row class="row-cell">
                                                <el-icon style="margin-top:2px">
                                                    <ele-Location/>
                                                </el-icon>
                                                <p class="data">{{ cardForm.companyAddress }}</p>
                                            </el-row>
                                            <el-row class="row-cell" v-if="cardForm.showEmail == 1">
                                                <el-icon style="margin-top:1px">
                                                    <ele-Message/>
                                                </el-icon>
                                                <p class="data">{{ cardForm.email }}</p>
                                            </el-row>
                                            <el-row class="row-cell" v-for="item in cardForm.customAttr" :key="item.id" align="middle">
                                                <span style="font-size:12px">{{ item.label }}:</span>
                                                <p class="data">{{ item.value }}</p>
                                            </el-row>
                                        </div>
                                        <el-image style="width: 80px; height: 80px" :src="qrCodeurl" :zoom-rate="1" :preview-src-list="[qrCodeurl]" fit="contain"/>
                                    </div>
                                </div>
                            </div>
                            <!-- 样式二 -->
                            <div class="card-style-2" v-else-if="cardForm.cardType == 2">
                                <div class="left-data">
                                    <div class="logo">
                                        <el-image style="height:60px;" :src="cardForm.logo" fit="scale-down"></el-image>
                                    </div>
                                    <el-image style="width: 60px; height: 60px;margin-top:20px" :src="qrCodeurl" :zoom-rate="1" :preview-src-list="[qrCodeurl]" fit="contain"/>
                                </div>
                                <div class="right-data">
                                    <div class="top-data">
                                        <div class="user-left">
                                            <p class="name">{{ cardForm.name }} <span class="job">{{ cardForm.positionName }}</span></p>
                                            <el-row v-if="cardForm.showPhone == 1" class="phone-data">
                                                <el-icon color="var(--el-color-primary-light-7)" style="margin-right:5px">
                                                    <ele-Phone/>
                                                </el-icon>
                                                <p class="data">{{ cardForm.phone }}</p>
                                            </el-row>
                                        </div>
                                        <el-image style="width: 50px; height: 50px" :src="cardForm.avatar" :preview-src-list="[cardForm.avatar]" fit="cover"/>
                                    </div>
                                    <div class="other-msg">
                                        <el-row justify="space-between" class="company-data">
                                            <h4 class="company-name">{{ cardForm.companyName }}</h4>
                                            <div class="chat-icon">
                                                <span>17聊</span>
                                                <communication theme="filled" size="14" fill="#ffffff"/>
                                            </div>
                                        </el-row>
                                        <el-row class="row-cell">
                                            <el-icon style="margin-top:2px" color="var(--el-color-primary)">
                                                <ele-Location/>
                                            </el-icon>
                                            <p class="data">{{ cardForm.companyAddress }}</p>
                                        </el-row>
                                        <el-row class="row-cell" v-if="cardForm.showEmail == 1">
                                            <el-icon style="margin-top:1px" color="var(--el-color-primary)">
                                                <ele-Message/>
                                            </el-icon>
                                            <p class="data">{{ cardForm.email }}</p>
                                        </el-row>
                                        <el-row class="row-cell" v-for="item in cardForm.customAttr" :key="item.id" align="middle">
                                            <span style="font-size:12px">{{ item.label }}:</span>
                                            <p class="data">{{ item.value }}</p>
                                        </el-row>
                                    </div>
                                </div>
                            </div>
                            <!-- 样式三 -->
                            <div class="card-style-3" v-else-if="cardForm.cardType == 3">
                                <div class="header-top">
                                    <div class="user-name">
                                        <el-image style="width: 40px; height: 40px;margin-right:5px" :src="cardForm.avatar" :preview-src-list="[cardForm.avatar]" fit="cover"/>
                                        <div class="user-content">
                                            <p class="name">{{ cardForm.name }}</p>
                                            <p class="job">{{ cardForm.positionName }}</p>
                                        </div>
                                    </div>
                                    <div class="logo" v-if="cardForm.logo">
                                        <el-image style="height:30px" :src="cardForm.logo" fit="scale-down"></el-image>
                                    </div>
                                </div>
                                <div class="bottom-msg">
                                    <el-row justify="space-between" class="company-data">
                                        <h4 class="company-name">{{ cardForm.companyName }}</h4>
                                        <div class="chat-icon">
                                            <span>17聊</span>
                                            <communication theme="filled" size="14" fill="#ffffff"/>
                                        </div>
                                    </el-row>
                                    <div class="other-msg">
                                        <div class="left-msg">
                                            <el-row class="row-cell">
                                                <el-icon style="margin-top:2px" color="var(--el-color-primary)">
                                                    <ele-Location/>
                                                </el-icon>
                                                <p class="data">{{ cardForm.companyAddress }}</p>
                                            </el-row>
                                            <el-row class="row-cell" v-if="cardForm.showEmail == 1">
                                                <el-icon style="margin-top:1px" color="var(--el-color-primary)">
                                                    <ele-Message/>
                                                </el-icon>
                                                <p class="data">{{ cardForm.email }}</p>
                                            </el-row>
                                            <el-row class="row-cell" v-for="item in cardForm.customAttr" :key="item.id" align="middle">
                                                <span style="font-size:12px">{{ item.label }}:</span>
                                                <p class="data">{{ item.value }}</p>
                                            </el-row>
                                        </div>
                                        <el-image style="width: 60px; height: 60px;" :src="qrCodeurl" :zoom-rate="1" :preview-src-list="[qrCodeurl]" fit="contain"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-row justify="space-between" class="center-data" style="align-items:stretch;">
                            <el-col :span="20">
                                <el-row class="store-msg">
                                    <el-col :span="12" v-if="cardForm.miniShop">
                                        <span class="align-tips">小程序商城：</span>
                                        <span class="align-data">{{ cardForm.miniShop }}</span>
                                    </el-col>
                                    <el-col :span="12" v-if="cardForm.officeAccountId">
                                        <span class="align-tips">微信公众号：</span>
                                        <span class="align-data">{{ cardForm.officeAccount }}</span>
                                    </el-col>
                                </el-row>
                                <el-row class="store-msg">
                                    <el-col :span="12" v-if="cardForm.yiqiShop">
                                        <span class="align-tips">17go.co店铺：</span>
                                        <span class="align-data">{{ cardForm.yiqiShop }}</span>
                                    </el-col>
                                    <el-col :span="12" v-if="cardForm.website">
                                        <span class="align-tips">官网地址：</span>
                                        <el-link class="align-data" :underline="false" style="font-size:12px" target="_blank" :href="cardForm.website">{{ cardForm.website }}</el-link>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="4" class="col-cell">
                                <div>
                                    <el-icon size="26px" color="var(--el-color-primary)">
                                        <ele-Share/>
                                    </el-icon>
                                </div>
                                <div class="col-data" v-if="cardForm.showWechat == 1">
                                    <wechat theme="outline" size="18" fill="#8b968d"/>
                                    <p style="font-size:10px;color:#8b968d">加微信</p>
                                </div>
                            </el-col>
                        </el-row>
                        <el-tabs v-model="activeCard" class="card-preview-tabs"  @click="tabHandlerClick">
                            <el-tab-pane label="产品" name="1"></el-tab-pane>
                            <el-tab-pane label="简介" name="2"></el-tab-pane>
                            <el-tab-pane label="招聘" name="3"></el-tab-pane>
                            <el-tab-pane label="采购" name="4"></el-tab-pane>
                            <el-tab-pane label="工作圈" name="5"></el-tab-pane>
                        </el-tabs>
                        <template v-if="activeCard == 1">
                            <div class="product-list" v-if="cardForm.productList.length > 0">
                                <div class="product-cell" v-for="item in cardForm.productList" :key="item.id">
                                    <el-image style="width: 88px; height: 88px" :src="item.image"/>
                                    <div class="product-data">
                                        <p class="product-title">{{item.spuName}}</p>
                                        <div class="product-other">
                                            <p class="price"><span class="unit">￥</span>{{item.price}}</p>
                                            <el-icon color="var(--el-color-primary)" size="18px">
                                                <ele-ShoppingCart/>
                                            </el-icon>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <el-empty v-else :image-size="100" description="暂无产品"/>
                        </template>
                        <template v-else-if="activeCard == 2">
                            <div v-if="cardForm.description" v-html="cardForm.description" class="description"></div>
                            <el-empty v-else :image-size="100" description="暂无简介"/>
                        </template>
                        <template v-else-if="activeCard == 3">
                            <div class="hire-list" v-if="cardForm.hireList.length > 0">
                                <div class="hire-cell" v-for="item in cardForm.hireList" :key="item.id">
                                    <div class="hire-top">
                                        <h4 class="hire-name">
                                            <el-tag
                                                size="small"
                                                v-for="staffType in dictMap['StaffType']"
                                                :type="staffType['tagClass']"
                                                :key="staffType.id"
                                                v-show="staffType.value == item.type"
                                            >{{ staffType.name }}
                                            </el-tag>
                                            {{ item.name }}
                                        </h4>
                                        <p class="salary" v-if="item.salaryInterview == '1'">面议</p>
                                        <p class="salary" v-else>
                                            {{ formatSalary(item.salaryStart) }} - {{ formatSalary(item.salaryEnd) }}
                                            <span v-for="salaryType in dictMap['SalaryTimeType']" :key="salaryType.id" v-show="salaryType.value == item.salaryTimeType">{{ salaryType.name }}</span>
                                        </p>
                                    </div>
                                    <p class="location">{{ item.workLocation }}</p>
                                    <!--                                    <div class="hire-welfare">-->
                                    <!--                                        <el-tag size="small" type="info" style="margin-right:5px;">五险一金</el-tag>-->
                                    <!--                                        <el-tag size="small" type="info" style="margin-right:5px;">周末双休</el-tag>-->
                                    <!--                                        <el-tag size="small" type="info" style="margin-right:5px;">包吃包住</el-tag>-->
                                    <!--                                        <el-tag size="small" type="info">年终奖</el-tag>-->
                                    <!--                                    </div>-->
                                </div>
                            </div>
                            <el-empty v-else :image-size="100" description="暂无招聘"/>
                        </template>
                        <template v-else-if="activeCard == 4">
                            <div class="product-list" v-if="cardForm.procuredList.length > 0">
                                <div class="product-cell" v-for="item in cardForm.procuredList" :key="item.id">
                                    <el-image style="width: 88px; height: 88px" :src="item.thumb"/>
                                    <div class="product-data">
                                        <p class="product-title">VALENTINO华伦天奴【新年礼物】女士ROSSO红V标志渔夫帽 ROSSO红/米色 S</p>
                                    </div>
                                </div>
                            </div>
                            <el-empty v-else :image-size="100" description="暂无产品"/>
                        </template>
                        <template v-else-if="activeCard == 5">
                            <div class="timeline-list" v-if="timeline.length > 0">
                                <div class="timeline-cell" v-for="(item, index) in timeline" :key="item.id">
                                    <el-avatar shape="square" :size="50" :src="item.avatar"/>
                                    <div class="timeline-data">
                                        <p class="member-name">{{ item.memberName }}</p>
                                        <div class="timeline-content">
                                            <p class="timeline-desc" v-if="item.content">{{ item.content }}</p>
                                            <div class="timeline-thumbs" v-if="!item.video && item.images && item.images.length > 0">
                                                <div class="timeline-thumb-cell" v-for="(url, idx) in item.images.split(',')" :key="url">
                                                    <el-image :src="url" :preview-src-list="item.images.split(',')" fit="cover" :z-index="9" :initial-index="idx"/>
                                                </div>
                                            </div>
                                            <div class="video-thumbs" v-else-if="item.video" @click="changePlay($event, index)" :data-id="`video${index}`">
                                                <video :src="item.video" class="video-content" :id="`video${index}`" :data-id="`video${index}`"></video>
                                                <div class="play-icon">
                                                    <!--  -->
                                                    <i v-if="!item.play" class="fa fa-play-circle" :data-id="`video${index}`"></i>
                                                    <i v-else class="fa fa-pause-circle" :data-id="`video${index}`"></i>
                                                </div>
                                            </div>
                                            <div class="other-options">
                                                <p class="time">{{ item.createTime }}</p>
                                                <p class="del" v-if="getUserInfo.id == item.userId" @click="delTimeLine(index)">删除</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <el-empty v-else :image-size="100" description="暂无工作圈内容"/>
                        </template>
                    </el-scrollbar>
                </div>
                <div class="card-form">
                    <el-form ref="refForm" :rules="cardRules" :model="cardForm" size="small" label-width="75px">
                        <el-row :gutter="24" style="align-items:stretch;">
                            <el-col :span="12" :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
                                <h4 class="form-title">个人信息</h4>
                                <el-form-item label="姓名" prop="name">{{ cardForm.name }}</el-form-item>
                                <el-form-item label="职位" prop="job">{{ cardForm.positionName }}</el-form-item>
                                <el-form-item label="头像" prop="avatar">
                                    <el-upload class="avatar-uploader" ref="uploadAvatar" :action="actionUrl" :headers="headers" :auto-upload="true" :multiple="false" :limit="1" :show-file-list="false" :on-success="imagesOnSuccess">
                                        <el-image v-if="cardForm.avatar" class="avatar" :src="cardForm.avatar" fit="cover"/>
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <ele-Plus/>
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="手机号码" prop="phone">
                                    <el-row>
                                        <el-input type="text" placeholder="请输入" v-model="cardForm.phone" maxlength="11" style="width:200px" @blur="onVerifyTelPhone()"></el-input>
                                        <el-radio-group v-model="cardForm.showPhone" size="small" style="margin-left:10px">
                                            <el-radio :label="1" size="small">显示</el-radio>
                                            <el-radio :label="0" size="small">隐藏</el-radio>
                                        </el-radio-group>
                                    </el-row>
                                </el-form-item>
                                <el-form-item label="邮箱" prop="mail">
                                    <el-row>
                                        <el-input type="text" placeholder="请输入" v-model="cardForm.email" style="width:200px" @blur="onVerifyEmail()"></el-input>
                                        <el-radio-group v-model="cardForm.showEmail" size="small" style="margin-left:10px">
                                            <el-radio :label="1" size="small">显示</el-radio>
                                            <el-radio :label="0" size="small">隐藏</el-radio>
                                        </el-radio-group>
                                    </el-row>
                                </el-form-item>
                                <el-form-item label="微信号" prop="wechat">
                                    <el-row>
                                        <el-input type="text" maxlength="14" placeholder="请输入" v-model="cardForm.wechatCode" style="width:200px"></el-input>
                                        <el-radio-group v-model="cardForm.showWechat" size="small" style="margin-left:10px">
                                            <el-radio :label="1" size="small">显示</el-radio>
                                            <el-radio :label="0" size="small">隐藏</el-radio>
                                        </el-radio-group>
                                        <el-col :span="24">
                                            <el-upload class="avatar-uploader" ref="uploadAvatar" :action="actionUrl" :headers="headers" :auto-upload="true" :multiple="false" :limit="1" :show-file-list="false" :on-success="imagesWeChatOnSuccess">
                                                <el-image v-if="cardForm.wechatQrcode" class="avatar" :src="cardForm.wechatQrcode" fit="cover"/>
                                                <el-icon v-else class="avatar-uploader-icon">
                                                    <ele-Plus/>
                                                </el-icon>
                                            </el-upload>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                                <el-form-item label="工作圈">
                                    <el-button size="small" type="primary" plain @click="addTimeLine">新增工作圈</el-button>
                                </el-form-item>
                                <el-form-item v-for="(item, index) in cardForm.customAttr" :key="item.id" label-width="0">
                                    <el-row align="middle">
                                        <el-input type="text" placeholder="表单名" v-model="item.label" style="width:65px;margin-right:10px" maxlength="4"></el-input>
                                        <el-input type="text" placeholder="表单内容" v-model="item.value" style="width:200px;margin-right:10px"></el-input>
                                        <el-icon :size="16" color="var(--el-color-danger)" style="cursor:pointer;" @click="delItem(index)">
                                            <ele-Remove/>
                                        </el-icon>
                                    </el-row>
                                </el-form-item>
                                <el-form-item style="margin-bottom:18px !important;">
                                    <el-tooltip
                                        effect="dark"
                                        content="新增自定义显示数据"
                                        placement="right-start"
                                    >
                                        <el-icon @click="addNewLabel" :size="20" color="var(--el-color-primary)" style="cursor:pointer;">
                                            <ele-CirclePlusFilled/>
                                        </el-icon>
                                    </el-tooltip>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" :lg="12" :xl="12" :md="24" :sm="24" :xs="24">
                                <!-- <h4 class="form-title">名片共享公开设置</h4>
                                <el-form-item label="公开范围" prop="resRelease" label-width="100px">
                                    <el-checkbox v-model="checkScopedAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange" style="margin-right:30px">全选</el-checkbox>
                                    <el-checkbox-group v-model="cardForm.resRelease" @change="handleCheckedScopedChange">
                                        <el-checkbox v-for="item in scopedList" v-show="(item.id != 3 && item.id != 4) || (item.id == 3 && cardForm.showWechat == 1) || (item.id == 4 && cardForm.showEmail == 1)" :key="item.id" :label="item.id">{{ item.label }}
                                            <template v-if="item.id == 1 && !cardForm.resRelease.includes(item.id)">
                                                <el-input placeholder="请输入昵称" style="width:75px" maxlength="14" v-model="cardForm.nickname"/>
                                            </template>
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item> -->
                                <!-- <el-form-item label="屏蔽的17+好友" label-width="100px">
                                    大概这里放已屏蔽的内容
                                    <el-row>
                                        <el-col :span="24">
                                            <el-button style="margin-top:2px;margin-left:-4px" size="small" type="primary" plain link @click="handleSetting">
                                                <el-icon style="margin-top:-1px">
                                                    <ele-Setting/>
                                                </el-icon>
                                                设置
                                            </el-button>
                                        </el-col>
                                        TODO 做17聊时再补充接口数据
                                        <el-col :span="24" v-if="cardForm.disabledFriends.length > 0">
                                            <el-table size="small" ref="table" :data="cardForm.disabledFriends" border style="margin-top:5px;width:300px;">
                                                <el-table-column label="用户昵称" prop="label" width="100px"></el-table-column>
                                                <el-table-column label="所属公司" prop="company"></el-table-column>
                                            </el-table>
                                        </el-col>
                                    </el-row>
                                </el-form-item> -->
                                <!-- <el-divider/> -->
                               <!--  <h4 class="form-title">17聊好友通过设置</h4>
                                <el-form-item label-width="0">
                                    <el-radio-group v-model="cardForm.friendApplyConfig" size="small">
                                        <el-radio label="0" size="small">自动通过</el-radio>
                                        <el-radio label="1" size="small">验证通过</el-radio>
                                    </el-radio-group>
                                </el-form-item> -->
                            </el-col>
                           <!--  <el-col :span="24">
                                <el-divider style="margin: 0 0 12px"/>
                                <h4 class="form-title">公司信息 <span class="red error-tips">*用于全公司人员名片信息</span></h4>
                                <el-row>
                                    <el-col :xs="24" :md="24" :xl="6" :sm="12" :lg="12">
                                        <el-form-item label="公司名称" prop="companyName">{{ cardForm.companyName || '-' }}</el-form-item>
                                    </el-col>
                                    <el-col :xs="24" :md="24" :xl="6" :sm="12" :lg="12">
                                        <el-form-item label="公司地址" prop="companyAddress">{{ cardForm.companyAddress || '-' }}</el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item label="logo" prop="logo">
                                    <el-image class="cardForm-avatar" :src="cardForm.logo || ''" fit="contain">
                                        <template #error>
                                            <div class="image-slot">
                                                <el-icon>
                                                    <ele-Picture/>
                                                </el-icon>
                                            </div>
                                        </template>
                                    </el-image>
                                     <el-upload class="avatar-uploader" ref="uploadAvatar" :action="actionUrl" :headers="headers" :auto-upload="true" :multiple="false" :limit="1" :show-file-list="false" :on-success="imagesLogoOnSuccess">
                                        <el-image v-if="cardForm.logo" class="avatar" :src="cardForm.logo" fit="contain"/>
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <ele-Plus/>
                                        </el-icon>
                                    </el-upload> 
                                </el-form-item>
                                <el-row class="inline-form">
                                    <el-col :xs="24" :md="24" :xl="6" :sm="12" :lg="12">
                                        <el-form-item label="小程序商城" prop="miniShopID">
                                            <el-select v-model="cardForm.miniShopID" placeholder="请选择" size="small" style="width:200px" clearable @change="handleMiniShopSelect">
                                                <el-option
                                                    v-for="item in miniShopList"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                            <el-icon @click="openSetting" size="18px" style="margin-left:5px;cursor:pointer;margin-top:3px" color="var(--next-bg-topBarColor)">
                                                <ele-Setting/>
                                            </el-icon>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :xs="24" :md="24" :xl="6" :sm="12" :lg="12">
                                        <el-form-item label="公众号" prop="officeAccountId">
                                            <el-select v-model="cardForm.officeAccountId" placeholder="请选择" size="small" style="width:200px" clearable @change="handleMiniOfficeSelect">
                                                <el-option
                                                    v-for="item in wechatPublic"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                            <el-icon @click="openSetting" size="18px" style="margin-left:5px;cursor:pointer;margin-top:3px" color="var(--next-bg-topBarColor)">
                                                <ele-Setting/>
                                            </el-icon>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :xs="24" :md="24" :xl="6" :sm="12" :lg="12">
                                        <el-form-item label="17店铺" prop="yiqiShopId">
                                            <el-select v-model="cardForm.yiqiShopId" placeholder="请选择" size="small" style="width:200px" clearable @change="handleYiqiShopSelect">
                                                <el-option
                                                    v-for="item in yiqishopList"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                            <el-icon @click="openSetting" size="18px" style="margin-left:5px;cursor:pointer;margin-top:3px" color="var(--next-bg-topBarColor)">
                                                <ele-Setting/>
                                            </el-icon>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :xs="24" :md="24" :xl="6" :sm="12" :lg="12">
                                        <el-form-item label="官网" prop="website">
                                            <el-input v-model="cardForm.website" placeholder="请输入" style="width:200px"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :xs="24" :md="24" :xl="6" :sm="12" :lg="12">
                                        <el-form-item label="产品" prop="selectProduct">
                                            <el-select v-model="selectProduct" multiple placeholder="请选择" style="width: 200px" @change="handleProductSelect">
                                                <el-option v-for="item in productList" :key="item.skuId" :label="item.skuName" :value="item.skuId"/>
                                            </el-select>
                                            <el-icon size="18px" @click="openProduct" style="margin-left:5px;cursor:pointer;margin-top:3px" color="var(--next-bg-topBarColor)">
                                                <ele-Setting/>
                                            </el-icon>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :xs="24" :md="24" :xl="6" :sm="12" :lg="12">
                                        <el-form-item label="招聘" prop="selectHire">
                                            <el-select v-model="selectHire" multiple placeholder="请选择" style="width: 200px" @change="handleHireSelect">
                                                <el-option v-for="item in hireList" :key="item.id" :label="item.jobName" :value="item.id"/>
                                            </el-select>
                                            <el-icon size="18px" @click="openHire" style="margin-left:5px;cursor:pointer;margin-top:3px" color="var(--next-bg-topBarColor)">
                                                <ele-Setting/>
                                            </el-icon>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :xs="24" :md="24" :xl="6" :sm="12" :lg="12">
                                        <el-form-item label="采购" prop="selectProcured">
                                            <el-select v-model="selectProcured" multiple placeholder="请选择" style="width: 200px" @change="handleProcuredSelect">
                                                <el-option v-for="item in procuredList" :key="item.skuId" :label="item.skuName" :value="item.skuId"/>
                                            </el-select>
                                            <el-icon size="18px" @click="openProcured" style="margin-left:5px;cursor:pointer;margin-top:3px" color="var(--next-bg-topBarColor)">
                                                <ele-Setting/>
                                            </el-icon>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item label="简介" prop="description">
                                    <Editor v-if="cardForm.description" v-model="cardForm.description"/>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                        <el-form-item>
                            <el-button size="small" type="primary" @click="submitForm">保存</el-button>
                            <el-button size="small" type="default" @click="resetForm">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-row>
        </div>
        <Friend v-model:dialogDrawer="dialogFriend" v-model:selected="cardForm.disabledFriends"></Friend>
        <create-card v-model:dialogDrawer="dialogCreate" @on-submit="handleCreate"></create-card>
        <time-line v-model:dialogDrawer="dialogTimeLine" @on-submit="handleTimeLineCreate"></time-line>
    </div>
</template>

<script>
import {reactive, toRefs, ref, computed, onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {storeToRefs} from 'pinia';
import {useUserInfo} from '/@/stores/userInfo';
import {Wechat, Communication} from '@icon-park/vue-next'
import {formatPast} from '/@/utils/formatTime'
import {ElMessage, ElMessageBox} from 'element-plus'
import Editor from '/@/components/editor/index.vue'
import Friend from './components/Friend.vue'
import CreateCard from './components/CreateCard.vue'
import TimeLine from './components/TimeLine.vue'
import {
    verifyCnAndSpace,
    verifyEmail,
    verifyPhone
} from '/@/utils/toolsValidate'
import {getMyCards, getDetail, saveCard} from '/@/api/sys/card'
import {getDictByCodes} from '/@/api/sys/dict'
import {getCardWorkCirclePage, pushData} from '/@/api/sys/workCircle'
import { Session } from '/@/utils/storage'
import {pageList} from '/@/api/pms/spu'

export default {
    name: 'Card',
    components: {
        Wechat,
        Editor,
        Friend,
        CreateCard,
        TimeLine,
        Communication
    },
    setup() {
        const router = useRouter()
        const route = useRoute()
        const uploadAvatar = ref()
        const userInfoConfig = useUserInfo()
        const {userInfos} = storeToRefs(userInfoConfig)
        const getUserInfo = computed(() => {
            return userInfos.value
        })
        const getForMat = computed(() => {
            return params => {
                return formatPast(params, 'YYYY-mm-dd HH:MM:SS')
            }
        })
        const state = reactive({
            id: route.query.id,
            currentCard: null, // 当前名片（值为名片id）
            cardList: [],
            dictMap: {},    // 字典
            qrCodeurl: '',
            activeCard: '1', // 名片下面显示的内容顺序
            hireList: [], // 招聘列表
            timeline: [], // 工作圈内容
            productList: [],
            procuredList: [],
            cardRules: {},
            cardForm: {
                friendCheck: '1',
                companyName: '',
                companyAddress: '',
                miniShop: '',
                miniShopID: '',
                officeAccount: '',
                officeAccountId: '',
                yiqiShop: '',
                yiqiShopId: '',
                website: '',
                description: ``,


                name: '',
                nickname: '',
                avatar: '',
                positionName: '',
                phone: '',
                email: '',
                wechatCode: '',
                wechatQrcode: '',
                logo: '',
                cardType: 1,    // 名片样式
                resRelease: [],     // 找资源公开范围
                customAttr: [],     // 自定义属性
                showPhone: 1,   // 手机号 0隐藏 1显示
                showEmail: 1,   // 邮箱 0隐藏 1显示
                showWechat: 1,  // 微信号&微信二维码 0隐藏 1显示
                friendApplyConfig: '1',     // 好友申请通过设置
                productList: [], // 采购列表
                disabledFriends: [],    // 名片屏蔽的17聊好友列表
            },
            checkScopedAll: false, // 是否全部勾选
            isIndeterminate: false, // 设置不确定状态
            selectProduct: [],
            selectHire: [],
            selectProcured: [],
            scopedList: [],
            actionUrl: '/api/file/filaAttach/upload',
            headers: {
                '17work': Session.get('token')
            },
            miniShopList: [],
            wechatPublic: [],
            yiqishopList: [],
            dialogFriend: false, // 设置好友屏蔽范围
            dialogCreate: false, // 新建名片
            dialogTimeLine: false, // 新建工作圈
            oldVideoId: '',
            oldVideoIndex: ''
        })
        const handleAddCard = () => {
            state.dialogCreate = true
        }
        // 名片切换
        const tabChange = async (e) => {
            if (e != state.cardForm.id) {
                const res = await getDetail({id: e})
                state.cardForm = res.data
                handleCardDetail(state.cardForm)
            }
        }
        // 头像上传
        const imagesOnSuccess = (response, uploadFile) => {
            console.log(uploadFile.raw)
        }
        const onVerifyEmail = () => {
            state.cardForm.email = verifyCnAndSpace(state.cardForm.email);
            if (!verifyEmail(state.cardForm.email)) {
                state.cardForm.email = ''
            }
        }
        const onVerifyTelPhone = () => {
            if (!verifyPhone(state.cardForm.phone)) {
                state.cardForm.phone = ''
            }
        }
        // 微信二维码上传
        const imagesWeChatOnSuccess = () => {

        }
        // 新增自定义表单
        const addNewLabel = () => {
            state.cardForm.customAttr.push({
                label: '',
                value: ''
            })
        }
        const delItem = index => {
            state.cardForm.customAttr.splice(index, 1)
        }
        // 公司logo上传
        const imagesLogoOnSuccess = () => {

        }
        // 选择小程序商城
        const handleMiniShopSelect = e => {
            const result = state.miniShopList.find(item => {
                return item.value == e
            })
            state.cardForm.miniShop = (result && result.label) || ''
        }
        const handleMiniOfficeSelect = e => {
            const result = state.wechatPublic.find(item => {
                return item.value == e
            })
            state.cardForm.officeAccount = (result && result.label) || ''
        }
        const handleYiqiShopSelect = e => {
            const result = state.yiqishopList.find(item => {
                return item.value == e
            })
            state.cardForm.yiqiShop = (result && result.label) || ''
        }
        const handleProductSelect = val => {
            let arr = []
            for (let i = 0; i < val.length; i++) {
                const result = state.productList.find(item => {
                    return item.skuId == val[i]
                })
                if (result) {
                    arr.push(result)
                }
            }
            state.cardForm.productList = arr
        }
        const handleHireSelect = val => {
            let arr = []
            for (let i = 0; i < val.length; i++) {
                const result = state.hireList.find(item => {
                    return item.id == val[i]
                })
                if (result) {
                    arr.push(result)
                }
            }
            state.cardForm.hireList = arr
        }
        const handleProcuredSelect = val => {
            let arr = []
            for (let i = 0; i < val.length; i++) {
                const result = state.procuredList.find(item => {
                    return item.skuId == val[i]
                })
                if (result) {
                    arr.push(result)
                }
            }
            state.cardForm.procuredList = arr
        }
        const submitForm = async () => {
            let params = Object.assign({}, state.cardForm)
            // 转字符串
            params.customAttr = JSON.stringify(params.customAttr)
            params.resRelease = params.resRelease.join(',')
            // 减少不必要数据提交
            params.hireList = null
            params.procuredList = null
            params.productList = null
            params.disabledFriends = null
            try {
                const res = await saveCard(params)
                if (res.code == 0) {
                    ElMessage.success('保存成功！')
                }
            } catch (e) {
                console.log(e)
            }
        }
        const resetForm = () => {
            router.go(-1)
        }
        // 公众号和小程序设置打开
        const openSetting = () => {
            router.push({
                path: '/shop/appsetting'
            })
        }
        // 产品设置
        const openProduct = () => {
            router.push({
                path: '/shop/appsetting'
            })
        }
        // 招聘设置
        const openHire = () => {
            router.push({
                path: '/oa/recruitPost'
            })
        }
        // 采购设置
        const openProcured = () => {
            // 暂无
        }
        // 公开范围全选
        const handleCheckAllChange = e => {
            state.checkScopedAll = e
            const arr = []
            state.scopedList.forEach(e => {
                arr.push(e.id)
            })
            state.cardForm.resRelease = e ? arr : []
            state.isIndeterminate = false
        }
        // 选择公开范围
        const handleCheckedScopedChange = val => {
            if (val) {  // 有值情况下
                const checkCount = val.length
                state.checkScopedAll = checkCount === state.scopedList.length
                state.isIndeterminate = checkCount > 0 && checkCount < state.scopedList.length
            }
        }
        // 好友屏蔽设置
        const handleSetting = () => {
            state.dialogFriend = true
        }
        const handleCreate = async(e) => {
            // state.cardList.push({name: `名片${state.cardList.length + 1}`, value: `${state.cardList.length + 1}`})
            try {
                await saveCard({
                    enterpriseId: e.company,
                    title: e.title
                })
                ElMessage.success('添加成功！')
                const res = await getMyCards()
                state.cardList = res.data
            } catch (e) {
                console.log(e)
            }
        }
        const addTimeLine = () => {
            state.dialogTimeLine = true
        }
        // 工作圈创建提交
        const handleTimeLineCreate = (e) => {
            let images = ''
            if (e.images && e.images.length > 0) {
                e.images.forEach(e => {
                    images += e.url + ','
                })
                images = images.substring(0, images.length - 1)
            }
            pushData({
                content: e.desc,
                images: images,
                video: e.videoUrl
            }).then(res => {
                if (res.code == 0) {
                    ElMessage.success('发布成功！')
                }
            }).catch(e => console.log(e))
        }
        // 删除数据
        const delTimeLine = index => {
            ElMessageBox.confirm('是否确定删除这条工作圈?', '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                ElMessage.success('删除成功')
                state.timeline.splice(index, 1)
            }).catch(() => {
            })
        }
        // 视频播放/暂停
        const changePlay = (e, index) => {
            const id = e.target.id ? e.target.id : e.target.dataset.id
            const videoDom = document.getElementById(id);
            const oldVideoId = state.oldVideoId
            const oldVideoIndex = state.oldVideoIndex
            if (oldVideoId == id) {
                if (videoDom.paused) {
                    videoDom.play();
                    state.timeline[index].play = true
                } else if (videoDom.play()) {
                    videoDom.pause();
                    state.timeline[index].play = false
                }
            } else {
                if (oldVideoId && document.getElementById(oldVideoId).play()) {
                    document.getElementById(oldVideoId).pause();
                    state.timeline[oldVideoIndex].play = false
                }
                if (videoDom.paused) {
                    videoDom.play();
                    state.timeline[index].play = true
                }
            }
            state.oldVideoId = id
            state.oldVideoIndex = index
        }
        const getCardList = async () => {
            try {
                const res = await getMyCards()
                state.cardList = res.data
                if (state.cardList.length > 0) {    // 默认放第一个
                    state.currentCard = state.cardList[0].id
                    let currentCard = Object.assign({}, state.cardList[0])
                    handleCardDetail(currentCard)
                    state.cardForm = currentCard
                    await getWorkCirclePage()
                    // 加载商品
                    await getShopList()
                }
            } catch (e) {
                console.log(e)
            }
        }
        // 数据转换处理
        const handleCardDetail = (businessCard) => {
            businessCard.customAttr = businessCard.customAttr ? businessCard.customAttr = JSON.parse(businessCard.customAttr) : []
            if (businessCard.resRelease) {
                businessCard.resRelease = businessCard.resRelease.split(',')
                for (let i = 0; i < businessCard.resRelease.length; i++) {
                    businessCard.resRelease[i] = parseInt(businessCard.resRelease[i])
                }
                handleCheckedScopedChange(businessCard.resRelease)
            } else {
                businessCard.resRelease = []
            }
        }
        const getDicts = async () => {
            try {
                const res = await getDictByCodes(['StaffType', 'SalaryTimeType'])
                state.dictMap = res.data
            } catch (e) {
                console.log(e)
            }
        }
        // 格式化薪酬显示格式
        const formatSalary = (salary) => {
            if (salary > 10000) {
                salary = (salary / 10000) + 'w'
            } else if (salary > 1000) {
                salary = (salary / 1000) + 'k'
            }
            return salary
        }
        const getWorkCirclePage = async () => {
            try {
                const res = await getCardWorkCirclePage({
                    current: 1,
                    size: 1000,
                    enterpriseId: state.cardForm.enterpriseId
                })
                state.timeline = res.data
            } catch (e) {
                console.log(e)
            }
        }


        
        const getShopList = async () => {
            try {
                let data = {
                    current: 1,
                    size:10
                }
                const res = await pageList(data)
                state.cardForm.productList = res.data.records
               
            } catch (e) {
                console.log(e)
            }
        }


        const tabHandlerClick = () =>{
            if(state.activeCard == '1'){
                getShopList()
            }
        }


        // 页面加载时
        onMounted(() => {
            // 加载字典数据
            getDicts()
            // 加载名片列表
            getCardList()
            
        })
        return {
            ...toRefs(state),
            handleAddCard,
            uploadAvatar,
            imagesOnSuccess,
            onVerifyEmail,
            onVerifyTelPhone,
            imagesWeChatOnSuccess,
            addNewLabel,
            delItem,
            imagesLogoOnSuccess,
            handleMiniShopSelect,
            handleMiniOfficeSelect,
            handleYiqiShopSelect,
            handleProductSelect,
            handleHireSelect,
            handleProcuredSelect,
            submitForm,
            resetForm,
            openSetting,
            openProduct,
            openHire,
            openProcured,
            handleCheckAllChange,
            handleCheckedScopedChange,
            handleSetting,
            handleCreate,
            addTimeLine,
            handleTimeLineCreate,
            getUserInfo,
            getForMat,
            delTimeLine,
            changePlay,
            getCardList,
            handleCardDetail,
            formatSalary,
            getWorkCirclePage,
            tabChange,
            getShopList,
            tabHandlerClick
        }
    }
}
</script>

<style scoped lang="scss">
.page-container {
    .card-content {
        background: var(--next-color-white);
        padding: 20px;

        .card-tabs {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            :deep(.el-tabs) {
                max-width: 100%;
            }
        }

        .card-scan {
            width: 100px;
        }

        .card-preview-box {
            width: 375px;
            height: 667px;
            margin-right: 20px;
            border-radius: 10px;
            box-shadow: rgb(0 0 0 / 5%) 0px 6px 24px 0px, rgb(0 0 0 / 8%) 0px 0px 0px 1px;
            background: var(--next-bg-main-color);
            overflow: hidden;

            :deep(.el-image) {
                display: block !important;
            }

            .card-header {
                background: var(--next-color-white);
            }

            .center-data {
                background: var(--next-color-white);
                padding: 10px 0;
                border-bottom: 1px solid var(--el-border-color);

                .col-cell {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    align-items: center;
                    cursor: pointer;

                    .col-data {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                    }
                }

                .store-msg {
                    padding-left: 10px;
                    height: 50%;
                    font-size: 12px;
                    align-items: stretch;

                    .align-tips {
                        color: var(--el-text-color-regular);
                    }

                    :deep(.el-col) {
                        display: flex;
                        align-items: stretch;
                        word-break: break-all;
                        word-wrap: break-word;
                    }

                    .align-data {
                        flex: 1;
                        overflow: hidden;
                    }
                }
            }

            .card-preview-tabs {
                background: var(--next-color-white);
                display: flex;
                justify-content: center;
                position: sticky;
                top: 0;
                border-bottom: 1px solid var(--el-border-color);
                z-index: 2;

                :deep(.el-tabs__nav-wrap) {
                    &::after {
                        display: none;
                    }
                }

                :deep(.el-tabs__header) {
                    width: calc(100% - 20px);
                    padding-left: 20px;
                    margin-bottom: 0;
                }
            }

            .product-list {
                padding: 0 10px 10px;
                background: var(--next-color-white);

                .product-cell {
                    padding: 10px 0;
                    border-bottom: 1px solid var(--el-border-color);
                    display: flex;
                    align-items: stretch;

                    &:last-child {
                        border: none;
                        padding-bottom: 0;
                    }

                    :deep(.el-image) {
                        img {
                            border-radius: 8px;
                        }
                    }

                    .product-data {
                        flex: 1;
                        overflow: hidden;
                        margin-left: 10px;
                        display: flex;
                        justify-content: space-between;
                        flex-direction: column;

                        .product-title {
                            font-size: 14px;
                            color: var(--el-text-color-primary);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }

                        .product-other {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;

                            .price {
                                font-size: 16px;
                                color: var(--el-color-error);
                                font-weight: bold;

                                .unit {
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }

            .description {
                :deep(img) {
                    max-width: 100% !important;
                    display: block;
                }
            }

            .hire-list {
                padding: 0 10px 10px;
                background: var(--next-color-white);

                .hire-cell {
                    padding: 10px 0;
                    border-bottom: 1px solid var(--el-border-color);

                    &:last-child {
                        border: none;
                        padding-bottom: 0;
                    }

                    .hire-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: stretch;
                        color: var(--el-text-color-primary);

                        .hire-name {
                            display: flex;
                            align-items: center;

                            :deep(.el-tag) {
                                margin-right: 5px;
                            }
                        }

                        .salary {
                            font-size: 15px;
                            color: var(--el-color-primary);
                        }
                    }

                    .location {
                        padding: 10px 0;
                        font-size: 12px;
                        color: var(--el-text-color-regular);
                    }
                }
            }

            .timeline-list {
                background: var(--next-color-white);
                padding: 0 10px;

                .timeline-cell {
                    padding: 10px 0;
                    border-bottom: 1px solid var(--el-border-color);
                    display: flex;
                    align-items: stretch;

                    &:last-child {
                        border: none;
                    }

                    .timeline-data {
                        flex: 1;
                        overflow: hidden;
                        margin-left: 10px;

                        .member-name {
                            color: var(--el-color-primary);
                            font-weight: bold;
                        }

                        .timeline-desc {
                            font-size: 14px;
                            color: var(--el-text-color-primary);
                            margin-bottom: 5px;
                        }

                        .timeline-thumbs {
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;

                            .timeline-thumb-cell {
                                width: 93px;
                                height: 93px;
                                margin-top: 5px;
                                margin-right: 5px;

                                :deep(.el-image) {
                                    width: 100% !important;
                                    height: 100% !important;
                                }

                                &:only-child {
                                    max-width: 100%;
                                    height: unset;
                                    width: unset;
                                    margin-bottom: 0;
                                }

                                &:nth-child(3n+1):nth-last-child(2),
                                &:nth-child(3n+2):last-child {
                                    margin-right: 5px;
                                    margin-bottom: 0;
                                }
                            }
                        }

                        .video-thumbs {
                            position: relative;
                            cursor: pointer;
                            width: 150px;

                            video {
                                object-fit: contain;
                                background: #000;
                                width: 150px;
                                height: 250px;
                                margin-top: 5px;
                            }

                            .play-icon {
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                margin: auto;
                                width: 150px;
                                height: 30px;
                                z-index: 10;
                                border-radius: 50%;
                                color: #fff;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                visibility: hidden;
                                opacity: .8;

                                i {
                                    font-size: 34px;
                                }
                            }

                            &:hover {
                                .play-icon {
                                    visibility: visible;
                                }
                            }
                        }

                        .other-options {
                            display: flex;
                            align-items: center;
                            margin-top: 5px;
                            font-size: 12px;

                            .time {
                                color: var(--el-color-info-light-3);
                            }

                            .del {
                                color: var(--el-color-primary);
                                display: flex;
                                align-items: center;
                                margin-left: 5px;
                                cursor: pointer;
                                margin-top: -1px;
                            }
                        }
                    }
                }
            }

            // 样式一
            .card-vertical {
                position: relative;

                .logo {
                    position: absolute;
                    top: 5px;
                    right: 5px;
                }

                .user-data {
                    padding: 10px 10px 0;
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;

                    .user-message {
                        display: flex;
                        align-items: stretch;
                        flex: 1;
                        overflow: hidden;

                        .user-info {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            flex: 1;
                            overflow: hidden;
                            margin-left: 10px;

                            .user-name {
                                font-size: 16px;
                                font-weight: bold;
                                margin-top: 2px;
                            }

                            .job {
                                font-size: 12px;
                                color: var(--el-text-color-primary);
                                text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                                max-width: 90%;
                            }
                        }
                    }
                }

                .card-code-content {
                    margin-top: 10px;
                    padding: 10px;
                    background: var(--el-color-primary-light-4);
                    background: -webkit-linear-gradient(to right, var(--el-color-primary), var(--el-color-primary-light-2));
                    background: linear-gradient(to right, var(--el-color-primary), var(--el-color-primary-light-2));

                    .company-name {
                        color: var(--next-color-white);
                        padding-left: 20px;
                    }

                    .code-bottom {
                        display: flex;
                        justify-content: space-between;
                        align-items: stretch;

                        .left-data {
                            flex: 1;
                            overflow: hidden;
                            margin-right: 10px;
                            color: var(--next-color-white);

                            .row-cell {
                                margin-top: 5px;

                                .data {
                                    margin-left: 5px;
                                    flex: 1;
                                    overflow: hidden;
                                    word-break: break-all;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                }
            }

            // 样式二
            .card-style-2 {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding: 10px 0 10px 10px;
                border-bottom: 1px solid var(--el-border-color);
                position: relative;
                overflow: hidden;

                &::before {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: -20%;
                    border-radius: 50%;
                    width: 60%;
                    height: 50%;
                    background: var(--el-color-primary-light-9);
                    transform: skewX(-55deg) skewY(18deg);
                    opacity: .5;
                }

                .left-data {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: calc(30% + 10px);
                    padding-right: 10px;
                }

                .right-data {
                    flex: 1;
                    overflow: hidden;

                    .top-data {
                        background: var(--el-color-primary);
                        padding: 5px 5px 5px 20px;
                        display: flex;
                        justify-content: space-between;
                        align-items: stretch;

                        .user-left {
                            flex: 1;
                            overflow: hidden;
                            display: flex;
                            justify-content: flex-start;
                            flex-direction: column;
                        }

                        .name {
                            color: var(--next-color-white);
                            font-size: 18px;

                            .job {
                                font-size: 12px;
                                color: var(--el-color-primary-light-8);
                            }
                        }

                        .phone-data {
                            color: var(--next-color-white);
                            margin-top: 5px;
                            align-items: center;

                            .data {
                                font-size: 12px;
                            }
                        }
                    }

                    .other-msg {
                        margin-top: 15px;

                        .company-data {
                            padding-right: 5px;
                            align-items: flex-start;

                            .company-name {
                                flex: 1;
                                overflow: hidden;
                                word-break: break-all;
                                word-wrap: break-word;
                            }
                        }

                        .row-cell {
                            margin-top: 8px;

                            .data {
                                margin-left: 5px;
                                flex: 1;
                                overflow: hidden;
                                word-break: break-all;
                                font-size: 12px;
                                color: var(--el-text-color-regular);
                            }
                        }
                    }
                }
            }

            // 样式三
            .card-style-3 {
                padding: 10px;
                border-bottom: 1px solid var(--el-border-color);

                .header-top {
                    display: flex;
                    justify-content: space-between;

                    .user-name {
                        flex: 1;
                        overflow: hidden;
                        display: flex;

                        .name {
                            color: var(--el-color-primary);
                            font-size: 16px;
                            font-weight: bold;
                        }

                        .job {
                            margin-top: 1px;
                            color: var(--el-color-primary);
                            font-size: 12px;
                        }
                    }
                }

                .bottom-msg {
                    padding-top: 20px;

                    .other-msg {
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-start;
                        margin-top: 5px;

                        .left-msg {
                            flex: 1;
                            overflow: hidden;

                            .row-cell {
                                margin-top: 8px;

                                .data {
                                    margin-left: 5px;
                                    flex: 1;
                                    overflow: hidden;
                                    word-break: break-all;
                                    font-size: 12px;
                                    color: var(--el-text-color-regular);
                                }
                            }
                        }
                    }
                }
            }

            .chat-icon {
                display: flex;
                align-items: center;
                font-size: 12px;
                cursor: pointer;
                flex-direction: row-reverse;
                color: var(--next-color-white);
                background: var(--el-color-primary);
                padding: 2px 4px;
                border-radius: 4px;

                span {
                    margin-left: 2px;
                    color: var(--next-color-white);
                }

                :deep(.i-icon) {
                    line-height: 12px;
                    position: relative;
                    top: 1px;
                }
            }
        }

        .card-form {
            flex: 1;
            overflow: hidden;

            .error-tips {
                color: var(--el-color-error);
                font-size: 12px;
                font-weight: bold;
            }

            .form-title {
                margin-bottom: 10px;
            }

            :deep(.el-form-item--small) {
                margin-bottom: 12px;
                align-items: flex-start;

                &:last-of-type {
                    margin-bottom: 12px !important;
                }
            }

            :deep(.el-radio) {
                margin-right: 10px;
            }

            :deep(.el-form-item__content) {
                align-items: flex-start;
            }
        }

        .avatar-uploader {
            margin-top: 5px;
        }

        .avatar-uploader .avatar {
            width: 88px;
            height: 88px;
            display: block;
        }

        .cardForm-avatar {
            width: 88px;
            height: 88px;
            display: block;
        }

        .cardForm-avatar .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            background: var(--el-fill-color-light);
            color: var(--el-text-color-secondary);
            font-size: 30px;
        }
    }
}
</style>
<style lang="scss">
.card-content {
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 88px;
        height: 88px;
        text-align: center;
    }
}
</style>
